Vue.component('show-detail', {//修改记录组件
    template: `<el-dialog title="订单详情" :visible.sync="visibleDialog" width="80vw">
        <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="1">
                <div class="table_titel">
                    <div class="titel">订单信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="订单编号">
                        <el-input v-model="data.Sales_Order_SerialNumber" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="参与活动">
                        <el-input v-model="data.Activity_Name" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单金额">
                        <el-input v-model="Amount" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="积分比例">
                        <el-input v-model="Deduction_Ratio" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="订单状态">
                        <el-input v-model="Row_Status" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="备注">
                        <el-input v-model="data.Sales_Message" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="table_titel">
                    <div class="titel">下单人信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="下单账户">
                        <el-input v-model="data.Member_Name" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="下单时间">
                        <el-input v-model="data.Sales_Date" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
                <div class="table_titel">
                    <div class="titel">收货人信息</div>
                </div>
                <el-descriptions id="show" :column="2" border size="small">
                    <el-descriptions-item label="姓名">
                        <el-input v-model="data.Sales_Contacts" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="手机号">
                        <el-input v-model="data.Sales_Phone" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="地址">
                        <el-input v-model="Sales_Address" :disabled="true"></el-input>
                    </el-descriptions-item>
                    <el-descriptions-item label="详情地址">
                        <el-input v-model="Sales_Address_Detail" :disabled="true"></el-input>
                    </el-descriptions-item>
                </el-descriptions>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="2">
                <el-table :data="tableData" stripe border max-height="50vh" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" prop="Supplier_Article_SerialNumber" label="供应商品编号"></el-table-column>
                    <el-table-column align="center" prop="Article_Name" label="商品名称"></el-table-column>
                    <el-table-column align="center" prop="Specifications_Name" label="规格名称"></el-table-column>
                    <el-table-column align="center" prop="Picture_URL" width="140" label="规格图片">
                        <template v-slot="{row}">
                            <el-image fit="contain" :preview-src-list="[BASE_IMG + row.Picture_URL]" :src="BASE_IMG + row.Picture_URL" style="width:100px;height: 100px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Supplier_Name" label="供应商"></el-table-column>
                    <el-table-column align="center" prop="Sales_Unit_Price" label="商品单价"></el-table-column>
                    <el-table-column align="center" prop="Quantity" label="商品数量"></el-table-column>
                    <el-table-column align="center" prop="Amount" label="商品总价"></el-table-column>
                    <el-table-column align="center" width="100" label="特殊状态">
                        <template v-slot="{row}">
                            {{Refund(row)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template v-slot="{row}">
                            <el-button :type="isRefund(row)?'danger':'info'" :disabled="!isRefund(row)" size="small" @click="RefundRequest(row)">退款</el-button>
                        </template>   
                    </el-table-column>
                </el-table>
                <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
                    :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="发货信息" name="3">
                <el-table :data="tableData1" stripe border max-height="50vh" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" prop="Article_Name" label="商品名称"></el-table-column>
                    <el-table-column align="center" prop="Supplier_Name" label="供应商名称"></el-table-column>
                    <el-table-column align="center" prop="Quantity" label="需发货量"></el-table-column>
                    <el-table-column align="center" prop="Delivery_Quantity" label="已发数量"></el-table-column>
                    <el-table-column align="center" label="未发数量">
                        <template v-slot="{row}">
                            {{parseInt(row.Quantity) - parseInt(row.Delivery_Quantity)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="发货状态">
                        <template v-slot="{row}">
                            <el-tag :type="row.Row_Status=='0'?'':row.Row_Status=='1'?'warning':'success'">{{Type(row.Row_Status)}}</el-tag>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="物流信息" name="4">
                <el-table :data="tableData2" stripe border max-height="50vh" style="width: 100%">
                    <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Sales_Order_Detail_SerialNumber" label="所属销售明细"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Logistics_Name" label="物流公司"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Supplier_Name" label="供应商"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Logistics_Number" label="物流单号"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Delivery_Data" width="180" label="发货时间"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Article_Name" width="180" label="商品名称"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Specifications_Name" width="180" label="规格名称"></el-table-column>
                    <el-table-column align="center" show-overflow-tooltip prop="Delivery_Quantity" label="发货数量"></el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <el-button @click="$emit('update:visible',false)">取消</el-button>
        </span>
    </el-dialog>`,
    props: ['data', 'visible'],
    data() {
        return {
            visibleDialog: false,
            tableData: [],//详情
            tableData1: [],//发货信息
            tableData2: [],//物流信息
            activeName: '1',
            form: {
                SQLSerialNumber: "P_business_sales_order_detail",
                PaginationNumber: 1,
                RowAmount: 10,
                ExtensionCondition: '',
                Condition: '',
                Sales_Order_SerialNumber: '',
            },
            total: 0,
        }
    },
    computed: {
        Amount() {
            let Sales_Point = this.data.Sales_Point == 0 ? '' : this.data.Sales_Point + '积分';
            let i = this.data.Sales_Point != 0 && this.data.Reality_Amount != 0 ? '+' : ''
            let Reality_Amount = this.data.Reality_Amount == 0 ? '' : this.data.Reality_Amount + '元'
            return Sales_Point + i + Reality_Amount
        },
        Deduction_Ratio() {
            return `1积分=${this.data.Deduction_Ratio}分`
        },
        Refund() {
            return function (row) {
                let str = row.Refund_Type.charAt(1)
                switch (str) {
                    case "0":
                        return "退款审核";
                    case "1":
                        return "已退款";
                    default:
                        return ""
                } 
            }
        },
        Type() {
            return function (str) {
                switch (str) {
                    case "0":
                        return "待发货";
                    case "1":
                        return "发货中";
                    case "2":
                        return "已发货";
                    default:
                        return ""
                }
            }
        },
        isRefund(){//是否允许退款
            return function(row){
                if (row.Refund_Type&&row.Refund_Type.charAt(1) != '2') { //不允许退款
                    return false;
                } else {
                    if (this.data.Row_Status&&(this.data.Row_Status.charAt(1)=='3'||this.data.Row_Status.charAt(1)=='4'||this.data.Row_Status.charAt(1)=='5')) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        Row_Status() {
            if (this.data.Refund_Type=='1') {
                return "已退款";
            } else {
                let Row_Status = this.data.Row_Status?this.data.Row_Status.charAt(1):'';
                switch (Row_Status) {
                    case "0":
                        return "待付款";
                    case "1":
                        return "待付款";
                    case "2":
                        return "待付款";
                    case "3":
                        return "已付款";
                    case "4":
                        return "已发货";
                    case "5":
                        return "已完成";
                    case "6":
                        return "已取消";
                    case "7":
                        return "已取消";
                    default:
                        return ""
                }
            }
        },
        Sales_Address() {
            try {
                let strs = this.data.Sales_Address.split('/');
                return strs[0] + "-" + strs[1] + "-" + strs[2];
            } catch (error) {
                return ''
            }
        },
        Sales_Address_Detail() {
            try {
                return this.data.Sales_Address.split('/')[3]
            } catch (error) {
                return ''
            }
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
        },
        'data.Sales_Order_SerialNumber': function (val) {
            this.form.Sales_Order_SerialNumber = val;
            this.tableData = [],//详情
            this.tableData1 = [],//发货信息
            this.tableData2 = [],//物流信息
            this.getList(this.form);
            this.getList1(val);
            this.getList2(val);
        }
    },
    methods: {
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getList(form) {
            const that = this;
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent(data.Sales_Order_SerialNumber)))
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                    console.log(Result);
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getList1(Sales_Order_SerialNumber){
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data:{
                    SQLSerialNumber: 'P_business_sales_order_detail1',
                    Condition: window.btoa(unescape(encodeURIComponent("%" + Sales_Order_SerialNumber + "%,%" + Sales_Order_SerialNumber + "%"))),
                    ExtensionCondition:''
                },
                success: function (Result) {
                   that.tableData1 = Result;
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        getList2(Sales_Order_SerialNumber){
            const that = this;
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data:{
                    SQLSerialNumber: 'P_business_sales_order_logistics',
                    Condition: window.btoa(unescape(encodeURIComponent(Sales_Order_SerialNumber))),
                    ExtensionCondition:''
                },
                success: function (Result) {
                    that.tableData2 = Result;
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        RefundRequest(row){//退款申请
            if (row.Row_Status=='2') {
                this.$message.error("当前商品已发货，无法人工退款");
                return 
            }
            const that = this;
            this.$confirm('警告！此操作将对该明细进行人工退款申请, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                $.ajax({
                    headers: requestHeaders(),
                    url: `${BASE_URL2}/collection/saveRefunds`,
                    type: 'POST',
                    data:{
                        Sales_Order_Detail_SerialNumber: row.Sales_Order_Detail_SerialNumber,
                        Refund_Type:'00',
                        Refund_Message:'',
                        Refund_Cause:'管理员发起退款',
                        Refund_Explain:'仅退款',
                    },
                    success: function (Result) {
                        if(Result.Status == 'success'){
                            that.$message.success("已提交申请")
                            that.getList(that.form);
                        }
                    },
                    complete: function (XMLHttpRequest) {
                        that.refreshDialog = false;
                        requestPretreatment(XMLHttpRequest);
                    },
                    dataType: "json"
                });
            }).catch(() => {});
        }
    }
})